<template>
  <view class="body-content">
    <image mode="heightFix" class="page-svg" :style="{width: width,height:height}" :src="setSvgBase64"/>
  </view>
</template>
<script>
export default {
  name: "set-svg",
  props: {
    // 原本的颜色
    oldColor: {
      type: String,
      default: () => '([^"]+)'
    },
    // 更改后的颜色
    newColor: {
      type: String,
      default: () => '#333'
    },
    // svg的url地址
    svgString: {
      type: String,
      default: () => ''
    },
    // 宽度
    width:{
      type: String,
      default: () => '50rpx'
    },
    // 高度
    height:{
      type: String,
      default: () => '50rpx'
    },
  },
  data() {
    return {
      newSvg: ''
    }
  },
  methods: {
    /**
     * 替换svg中的颜色
     * @param svgString svg的代码
     * @param newColor 需要替换成的颜色
     * @returns {*}
     */
    replaceFillColorInSVG(svgString, newColor) {
      let theOldColor = this.oldColor
      if (!theOldColor.includes("#")) {
        theOldColor = "#" + theOldColor;
      }
      const regex = new RegExp(`${theOldColor}`, "g");
      return svgString.replace(regex, `${newColor}`);
    },
    // 将SVG URL 转换成 SVG 标签格式的方法
    fetchAndConvertSVG(svgUrl) {
      let _this = this;
      uni.request({
        url: svgUrl,
        method: 'GET',
        responseType: 'text',
        success: function (res) {
          _this.newSvg = res.data
        },
        fail: function (error) {
          return error
        }
      });
    }
  },
  mounted() {
    this.fetchAndConvertSVG(this.svgString)
  },
  computed: {
    setSvgBase64() {
      let theSvg = encodeURIComponent(this.replaceFillColorInSVG(this.newSvg, this.newColor))
      return 'data:image/svg+xml;charset=utf-8,' + theSvg
    }
  }
}
</script>
<style scoped lang="scss">
.body-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-svg {
  margin: 0 auto;
}
</style>